<template>
    <a-layout id="components-layout-demo-custom-trigger">
        <a-layout-sider v-model="collapsed" collapsible :defaultCollapsed="true">
            <a-popover placement="right">
                <template slot="content">
                    <a-row type="flex" align="middle" justify="center" class="panel">
                        <a-row class="open-btn" type="flex" align="middle" justify="center">
                            <a-button type="dashed" @click="addVideo('openFile')" style="margin-right: 10px;">
                                选择文件
                            </a-button>
                            <a-button type="dashed" @click="addVideo('openDirectory')">
                                选择文件夹
                            </a-button>
                        </a-row>
                    </a-row>
                </template>
                <a-row class="logo" type="flex" justify="center" align="middle">
                    <a-icon type="plus-circle" style="color: white; font-size: 30px;" />
                </a-row>
            </a-popover>
            <a-menu
                theme="dark"
                mode="inline"
                :default-selected-keys="['1']"
                :selectedKeys="[menuKey]"
                @click="clickMenu"
            >
                <a-menu-item key="1">
                    <a-icon type="play-circle" />
                    <span>视频库</span>
                    <router-link to="/videoHall"></router-link>
                </a-menu-item>
                <a-menu-item key="2">
                    <a-icon type="setting" />
                    <span>设置</span>
                    <router-link to="/configPage"></router-link>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
                <router-view v-if="!videoPlayer"></router-view>
            </a-layout-content>
        </a-layout>
        <AddVideo ref="addVideoRef" />
        <a-modal
            title="选择关闭窗口"
            :visible="visible"
            @ok="setVisible(false, 'ok')"
            @cancel="restart"
            class="close-dialog"
            okText="确定"
            cancelText="重启"
            :after-close="afterClose"
        >
            <CloseDialog ref="closeDialogRef" />
        </a-modal>
        <router-view v-if="videoPlayer"></router-view>
    </a-layout>
</template>
<script>
    import { readData } from '@/util/file-action'
    import AddVideo from '@/components/add-video'
    import { ipcRenderer } from 'electron'
    import CloseDialog from '@/components/close-dialog/index.vue'

    export default {
        name: 'MainPage',
        components: {
            AddVideo,
            CloseDialog,
        },
        data() {
            return {
                collapsed: true,
                menuKey: '1',
                visible: false,
                dontAsk: {},
                action: 'ok',
                radioVal: 'exit',
                videoPlayer: false,
            }
        },
        watch: {
            '$store.state.videos.dontAsk': {
                handler(nval) {
                    this.dontAsk = nval
                    if (nval.value) this.action = 'ok'
                    this.radioVal = nval.opt
                },
                deep: true,
            },
            '$route.path': {
                handler(nval) {
                    this.videoPlayer = nval.indexOf('videoPlayer') > -1
                    console.log(nval, this.videoPlayer)
                },
                deep: true,
            },
        },
        mounted() {
            this.loadLocalData()

            ipcRenderer.on('setMenuKey', (event, message) => {
                this.menuKey = message
                this.$router.push(message == '1' ? '/videoHall' : '/configPage')
            })

            ipcRenderer.on('closeWindow', () => {
                const { value, opt } = this.dontAsk
                // 选中了不再询问
                if (value) {
                    this.afterClose(opt)
                } else {
                    this.setVisible(true)
                }
            })
        },
        methods: {
            afterClose() {
                const { action, radioVal } = this
                if (action == 'ok') {
                    if (radioVal == 'tray') {
                        ipcRenderer.send('toTray')
                    } else if (radioVal == 'exit') {
                        ipcRenderer.send('exit')
                    }
                }
            },
            setVisible(val = false, action = 'cancel') {
                if (val) {
                    this.visible = val
                } else {
                    // 关闭窗口
                    this.radioVal = this.$refs.closeDialogRef.radioVal
                    this.visible = val
                }
                this.action = action
            },
            async loadLocalData() {
                const videoData = await readData('video')
                if (videoData?.videos) {
                    this.$refs.addVideoRef.setVideoList(videoData.videos)
                    this.$store.dispatch('videos/setVideoList', videoData.videos)
                }
                if (videoData?.paths) {
                    this.$store.commit('videos/setPathList', videoData.paths)
                }
                this.$store.commit('videos/setDontAsk', videoData?.dontAsk ?? { value: false, opt: 'exit' })
                const ruleData = await readData('rule')
                if (ruleData?.ruleList) {
                    this.$store.commit('rules/setRuleList', ruleData.ruleList)
                }
            },
            clickMenu({ key }) {
                this.menuKey = key
            },
            async addVideo(type) {
                this.$refs.addVideoRef.addVideo(type)
            },
            restart() {
                ipcRenderer.send('restart')
            },
        },
    }
</script>
<style>
    .ant-layout.ant-layout-has-sider {
        height: 100%;
    }

    #components-layout-demo-custom-trigger .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }

    #components-layout-demo-custom-trigger .trigger:hover {
        color: #1890ff;
    }

    #components-layout-demo-custom-trigger .logo {
        height: 32px;
        margin: 16px;
    }
</style>
